<template>
  <div id="app">
    <!-- vue的导航组件 router-link 点击能够让浏览器的路径发生变化 类似于a标签-->
    <router-link to="/my">个人中心</router-link>
    |
    <router-link to="/discover">发现</router-link>
    |
    <router-link to="/friend">监狱风云2</router-link>
    |
    <router-link to="/list">列表</router-link>
    |
    <router-link to="/detail">详情</router-link>
    |
    <router-link to="/conter">计数器</router-link>
    |
    <router-link to="/other">其他</router-link>
    |
    <router-link to="/cart">购物车</router-link>
    |
    <router-link to="/login">登入</router-link>
    |
    <router-link to="/home">主页</router-link>

    <button @click="jump">点击跳转</button>
    <router-view></router-view>

    

    <!-- router-view 是可以起名字的 -->
    <router-view name="iii"></router-view>
    <selectcom></selectcom>
  </div>
</template>

<script>
import selectcom from './select'
// 使用编程式导航  点击跳转  
    // 页面传参总结
      // push      relace  localStorage   sessionStorage window
export default {
  components:{
    selectcom
  },
  methods: {
    jump() {
      // 编程式导航的方法  push replace forward top go
      // push 和 replace 差不多，区别在于 replace不产生历史记录，会替换掉上一个历史记录

      // 1.
      if(this.$route.path !== '/list') {
        this.$router.push('/list') 
      }
      

      // 2. 传参 传参方式 query  params
      // query 刷新页面不会丢失参数
      // this.$router.push({ path: "/list", query: { name: "哪路托" } });
      // params 不能通过路径跳转传递，只能通过类名传递（具名路由）  
                // 刷新会丢失参数，因为参数是在内存传递  解决方案：存到本地，或者不用
      // this.$router.push({ path: "/list", query: { name: "哪路托" } });
      // this.$router.push({ name:"list", query: { name: "哪路托" } });

      // relace
        // this.$router.replace ({ name:"list", query: { name: "哪路托" } });

      // go 进入到某一历史记录栈,可输入正负值，负值往指针左边走，正值反之
      // 如果传入的值是 0 ，或者没有历史记录， 什么都不会发生
        // this.$router.go(-2)

    },
    
  },
};
</script>